﻿@{
    ViewBag.Title = "Treeview";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="main-content adminmainbox">
    <div class="breadcrumbs" id="breadcrumbs">
        <ul class="breadcrumb">
            <li><i class="icon-home home-icon"></i><a href="#">Home</a> </li>
            <li class="active">TreeView</li>
        </ul>
        <!-- .breadcrumb -->
    </div>
    <div class="page-content">
        <div class="page-header">
            <h1>
                TreeView <small><i class="icon-double-angle-right"></i>overview &amp; stats </small>
            </h1>
        </div>
        <div class="row">
            <div class="span6">
                <div class="widget-box">
                    <div class="widget-header header-color-blue2">
                        <h4 class="lighter smaller">
                            Choose Categories</h4>
                    </div>
                    <div class="widget-body">
                        <div class="widget-main padding-8">
                            <div id="tree1" class="tree"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="span6">
                <div class="widget-box">
                    <div class="widget-header header-color-green2">
                        <h4 class="lighter smaller">
                            Browse Files</h4>
                    </div>
                    <div class="widget-body">
                        <div class="widget-main padding-8">
                            <div id="tree2" class="tree"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- PAGE CONTENT ENDS -->
    </div>
</div>
<!-- /.main-content -->
@section tail{
    <script type="text/javascript" src="/content/plugins/fuelux/data/fuelux.tree-sampledata.js"></script>
	<script type="text/javascript" src="/content/plugins/fuelux/fuelux.tree.min.js" ></script>
	<script type="text/javascript" src="/content/scripts/ace-elements.min.js" ></script>
    <script type="text/javascript">
        $(function () {
            $('#treeview').parent().addClass('active');

            $('#tree1').ace_tree({
                dataSource: treeDataSource,
                multiSelect: true,
                loadingHTML: '<div class="tree-loading"><i class="icon-refresh icon-spin blue"></i></div>',
                'open-icon': 'icon-minus',
                'close-icon': 'icon-plus',
                'selectable': true,
                'selected-icon': 'icon-ok',
                'unselected-icon': 'icon-remove'
            });
            $('#tree2').ace_tree({
                dataSource: treeDataSource2,
                loadingHTML: '<div class="tree-loading"><i class="icon-refresh icon-spin blue"></i></div>',
                'open-icon': 'icon-folder-open',
                'close-icon': 'icon-folder-close',
                'selectable': false,
                'selected-icon': null,
                'unselected-icon': null
            });
        });
    </script>
}
